<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      body {
         background: #FAF3EC;
         font-family: 'Roboto';
      }

      ::-webkit-input-placeholder {
         /* Chrome/Opera/Safari */
         color: #748194;
      }

      ::-moz-placeholder {
         /* Firefox 19+ */
         color: #748194;
      }

      :-ms-input-placeholder {
         /* IE 10+ */
         color: #748194;
      }

      :-moz-placeholder {
         /* Firefox 18- */
         color: #748194;
      }

      .container {
         display: none;
         position: absolute;
         width: auto;
         height: auto;
         top: calc(50% - 240px);
         left: calc(40% - 160px);
         border-radius: 15px 15px 15px 15px;
      }

      .c1 {
         box-shadow: 0 0 10px grey;
         background-color: white;
         width: 300px;
         height: 500px;
         display: inline-block;
         border-radius: 15px 15px 15px 15px;
      }

      .c11 {
         background-image: url('https://i.pinimg.com/736x/b8/09/22/b80922f6ea2daaf36a6627378662803b--deck-of-cards-phone-wallpapers.jpg');
         background-size: 300px 400px;
         background-repeat: no-repeat;
         background-color: white;
         width: 300px;
         height: 400px;
         display: inline-block;
         position: absolute;
         z-index: 4;
         border-radius: 15px 15px 200px 200px;
      }

      #left,
      #right {
         color: white;
         display: inline-block;
         width: 146px;
         height: 500px;
         background-color: white;
         cursor: pointer;
      }

      #left {
         border-radius: 15px 0px 0px 15px;
      }

      #right {
         border-radius: 15px 15px 15px 0px;
      }

      .left_hover {
         color: #EE9BA3;
         box-shadow: 5px 0 18px -10px #333;
         z-index: 1;
         position: absolute;
      }

      .right_hover {
         box-shadow: -5px 0 15px -10px #333;
         z-index: 1;
         position: absolute;
      }

      .s1class {
         color: #748194;
         position: absolute;
         bottom: 0;
         left: 63%;
         margin-left: -50%;
      }

      .s1class span,
      .s2class span {
         display: block;
      }

      .su {
         font-size: 20px;
      }

      .s2class {
         color: #748194;
         position: absolute;
         bottom: 0;
         right: 63%;
         margin-right: -50%;
      }

      .mainhead {
         color: white;
         font-size: 13px;
         text-align: center;
         margin-top: 50px;
      }

      .mainp {
         color: white;
         font-size: 13px;
         text-align: center;
         margin-top: 10px;
      }

      .c2 {
         background-color: white;
         width: 300px;
         height: 500px;
         border-radius: 15px;
         position: absolute;
         left: 370px;
         display: inline-block;
      }

      .username {
         font-weight: bold;
         width: 200px;
         margin: 0 35px 20px;
         height: 35px;
         padding: 6px 15px;
         border-radius: 5px;
         outline: none;
         border: none;
         background: #F6F7F9;
         color: #748194;
         font-size: 14px;
      }

      .btn {
         font-weight: bold;
         width: 230px;
         margin: 0 35px 20px;
         height: 45px;
         padding: 6px 15px;
         border-radius: 5px;
         outline: none;
         border: none;
         background: #EE9BA3;
         color: white;
         font-size: 14px;
      }

      .signup1 {
         color: #748194;
         font-size: 25px;
         text-align: center;
      }

      a {
         text-decoration: none;
      }

      .signup2 {
         color: #748194;
         font-size: 20px;
         text-align: center;
      }

      .signup {
         display: initial;
      }

      .signin {
         display: initial;
      }
   </style>
</head>

<body>
   <div class="container">
      <div class="c1">

         <div class="c11">
            <h1 class="mainhead">病起萧萧两鬓华，卧看残月上窗纱。</h1>
            <p class="mainp">枕上诗书闲处好，门前风景雨来佳。终日向人多酝藉，木犀花。
            </p>
         </div>
         <div id="left">
            <h1 class="s1class"><span>登录</span><span class="su">Sign in</span>
            </h1>
         </div>
         <div id="right">
            <h1 class="s2class"><span>注册</span><span class="su">Sign up</span></h1>
         </div>
      </div>
      <div class="c2">
         <div class="signup">
            <h1 class="signup1">下一个就是你</h1>
            <br><br><br><br>
            <input name="username" type="text" placeholder="请输入您的账号" class="username" id="accountNumber" />

            <input name="email" type="text" placeholder="请输入您的邮箱" class="username" id="mailbox" />

            <input name="password" type="password" placeholder="请输入您的密码" class="username" id="passwords" />

            <input name="password" type="password" placeholder="确认您的密码" class="username" id="aencode" />

            <button class="btn" id="register">注册</button>
         </div>
         <div class="signin">

            <h1 class="signup1">欢迎来到亿万富豪俱乐部</h1>
            <br><br><br><br>
            <input name="username" type="text" placeholder="请输入您的账号" class="username" id="username" />

            <input name="password" type="password" placeholder="请输入您的密码" class="username" id="password" />

            <button class="btn " id="entry">登录</button>

            <br><br><br><br>
            <a href="">
               <p class="signup2">忘记密码？</p>
            </a>
            <div id="message"></div>
         </div>

      </div>
   </div>

</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/layer/3.5.1/layer.js"></script>
<script>
   $(document).ready(function () {
      $(".container").fadeIn(1000);
      $(".s2class").css({ "color": "#EE9BA3" });
      $(".s1class").css({ "color": "#748194" });
      $("#left").removeClass("left_hover");
      $("#right").addClass("right_hover");
      $(".signin").css({ "display": "none" });
      $(".signup").css({ "display": "" });
   });
   $("#right").click(function () {
      $("#left").removeClass("left_hover");
      $(".s2class").css({ "color": "#EE9BA3" });
      $(".s1class").css({ "color": "#748194" });
      $("#right").addClass("right_hover");
      $(".signin").css({ "display": "none" });
      $(".signup").css({ "display": "" });
   });
   $("#left").click(function () {
      $(".s1class").css({ "color": "#EE9BA3" });
      $(".s2class").css({ "color": "#748194" });
      $("#right").removeClass("right_hover");
      $("#left").addClass("left_hover");
      $(".signup").css({ "display": "none" });
      $(".signin").css({ "display": "" });
   });
   let usernameEle = document.getElementById("username")
   let passwordEle = document.getElementById("password")
   let entryEle = document.getElementById("entry")
   let messageEle = document.getElementById("message")

   // 绑定单机事件
   entryEle.onclick = function () {
      //2. 获取用户名和密码
      let username = usernameEle.value;
      let password = passwordEle.value;

      //3. 基本信息基本校验
      let useme = /^[\u4E00-\u9FA5A-Za-z0-9_]{6,}$/;
      if (!useme.test(username)) {
         messageEle.innerHTML = "<span class='error'>用户名不能少于6位数,不能包含特殊字符</span>"
         return false;
      }
      //3. 基本信息基本校验
      let pwdReg = /^.{6,}$/;
      if (!pwdReg.test(password)) {
         messageEle.innerHTML = '<span class="error">密码不能少于8位</span>'
         return false;
      }


      messageEle.innerHTML = '';
      // 防止用户频繁按钮，对服务器造成一定的压力
      // loginBtnEle.setAttribute('disabled','disabled')
      // loginBtnEle.innerText = "登录中.."
      //4. 校验成功发送ajax请求，到服务器进行验证匹配
      let xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function () {
         if (this.readyState === 4 && this.status === 200) {
            let data = JSON.parse(this.responseText)
            alert('有数据')
            // loginBtnEle.removeAttribute('disabled')
            // loginBtnEle.innerText = "登录"
            let { code, message } = data;
            if (code == '20000') {
               alert('登录成功')
               location.href = "/";
            } else {
               alert('用户名或密码失败')
            }
         }
      }
      xhr.open('post', '/ajaxlogin', true)
      // post要设置请求头content-type,模拟post表单来传递数据
      xhr.setRequestHeader("Content-type", 'application/x-www-form-urlencoded');
      username = encodeURIComponent(username);
      password = encodeURIComponent(password);

      //编码
      let formdata = `username=${username}&password=${password}`;
      xhr.send(formdata)
   }

    let isValidEmail = false;


    //失去焦点邮箱
    $("#mailbox").on("blur", function () {
        let mailbox = $(this).val();
        if (!/^\w+@(?:\w+\.)+[a-zA-Z]{2,6}$/.test(mailbox)) {
            layer.msg("邮箱格式非法")
            return;
        }


        //编码
        // mailbox = encode(mailbox);

        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (this.readyState === 4 && this.status === 200) {
                let data = JSON.parse(this.responseText)

                let { code, message } = data;
                layer.msg(message);
                if (code === 20000) {
                    isValidEmail = true
                    layer.msg(message)
                } else {
                    isValidEmail = false;
                    layer.msg(message)
                }
            }
        }
        xhr.open("post", '/ajaxemail', true)
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
        let formData = `user_mailbox=${mailbox}`
        xhr.send(formData)


    })


    //注册
    $('#register').on('click', function () {
        //获取值
        let mailbox = $("#mailbox").val()
        let accountNumber = $("#accountNumber").val()
        let password = $("#passwords").val()
        let aencode = $("#aencode").val()

        // 2 校验
        if ([mailbox, accountNumber, password, aencode].includes('')) {
            layer.msg('账号密码不能为空')
            return
        }
        if (!/^\w+@(?:\w+\.)+[a-zA-Z]{2,6}$/.test(mailbox)) {
            layer.msg('邮箱格式非法')
            return;
        }
        if (password !== aencode) {
            layer.msg('请确认密码一致')
            return
        }
        mailbox = encode(mailbox);
        accountNumber = encode(accountNumber);
        password = encode(password);
        aencode = encode(aencode);

        //3  发送Ajax请求
        if (!isValidEmail) {
            layer.msg('邮箱不可用')

            return;
        }
        $(this).prop('disabled', true).html("注册中。。。");
        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (this.readyState === 4 && this.status === 200) {
                $(this).prop('disabled', false).html("注册");

                let data = JSON.parse(this.responseText)
                let { code, message } = data;
                layer.msg(message);
                if (code === 20000) {
                    location.href = '/login'
                }

            }
        }
        xhr.open('post', '/ajaxregister', true)
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
        //传到控制器的数据 
        let formData = `account_number=${accountNumber}&user_mailbox=${mailbox}&user_password=${password}&aencode=${aencode}`
        xhr.send(formData)
    })

    //对数据进行编码
    function encode(value) {
        return encodeURIComponent(value)
    }

</script>

</html>